* {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}

.carousel {
	position: relative;
	margin: 100px auto;
	width: 100%;
	background: #ccc;
	height: 400px;
}
.carousel-main {
	position: absolute;
	width: 800px;
	height: 400px;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	li {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	li:nth-of-type(1) {
		background: #6f9dd4;
	}
	li:nth-of-type(2) {
		background: #f56c50;
	}
	li:nth-of-type(3) {
		background: #fff9ae;
	}
}
.carousel-pagination {
	position: absolute;
	width: 100px;
	height: 20px;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	li {
		float: left;
		width: 20px;
		height: 100%;
		background: #dfdfdf;
	}
	li + li {
		margin-left: 20px;
	}
	.active {
		background: #f62d1d;
	}
}
.carousel-controller {
	.controller-left,
	.controller-right {
		position: absolute;
		width: 20px;
		height: 40px;
		top: 50%;
		transform: translateY(-50%);
		line-height: 40px;
		font-size: 30px;
		background: #aef7a8;
		cursor: pointer;
	}
	.controller-left {
		left: 5%;
	}
	.controller-right {
		right: 5%;
	}
}

